<template>
    <div class="centent">
        <div class="title">
            <van-icon @click="router.back()" size="22px" color="#fff" name="arrow-left" />
            <span class="text">{{ $t('節點') }}</span>
        </div>
        <div class="bac">
            <span>{{ $t('结束倒计时') }}</span>
            <van-count-down :time="time" />
        </div>
        <div class="items">
            <div @click="checkC(0)" class="item">
                <div class="top">
                    <img src="@/assets/node/img1.png" alt="">
                </div>
                <div :style="{ border: check === 0 ? '1px solid #f2bf3c' : '0' }" class="btm">
                    <div style="font-size: 14px;">{{ $t('創世節點') }}</div>
                    <div style="margin-top: 8px;color: #f2bf3c;">3000USDT</div>
                </div>
            </div>
            <div @click="checkC(1)" class="item">
                <div class="top">
                    <img src="@/assets/node/img2.png" alt="">
                </div>
                <div :style="{ border: check === 1 ? '1px solid #f2bf3c' : '0' }" class="btm">
                    <div style="font-size: 14px;">{{ $t('超級節點') }}</div>
                    <div style="margin-top: 8px;color: #f2bf3c;">1500USDT</div>
                </div>
            </div>
            <div @click="checkC(2)" class="item">
                <div class="top">
                    <img src="@/assets/node/img2.png" alt="">
                </div>
                <div :style="{ border: check === 2 ? '1px solid #f2bf3c' : '0' }" class="btm">
                    <div style="font-size: 14px;">{{ $t('普通節點') }}</div>
                    <div style="margin-top: 8px;color: #f2bf3c;">1000USDT</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const time = ref(30 * 60 * 60 * 1000);
const check = ref(0)


function checkC(val) {
    if (check.value == val) return
    check.value = val
}
</script>

<style lang="scss" scoped>
.centent {
    padding: 8px 15px 15px 15px;
    background-color: #17171a;
    min-height: 100vh;

    .title {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 32px;

        .text {
            font-size: 16px;
            color: #fff;
            // margin-left: auto;
        }

        .van-icon {
            position: absolute;
            left: 0;
            // margin-left: auto;
        }
    }

    .bac {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100%;
        height: 83px;
        background-image: url('@/assets/node/bac.png');
        background-size: 100% 100%;
        margin-top: 14px;
        padding: 16px;
        box-sizing: border-box;

        span {
            font-size: 13px;
            color: #d5d5d5;
        }

        .van-count-down {
            color: #fff;
            font-size: 22px;
            margin-top: 10px;
        }
    }

    .items {
        display: flex;
        justify-content: space-between;
        //换行
        flex-wrap: wrap;
        width: 100%;
        margin-top: 8px;

        .item {
            width: 176px;

            .top {
                width: 100%;
                height: 188px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .btm {
                width: 175px;
                height: 68px;
                font-size: 17px;
                color: #fff;
                background-color: #2e323b;
                margin-top: 10px;
                padding: 12px;
                box-sizing: border-box;
                border-radius: 5px;
                border: 1px solid #2e323b;
            }
        }
    }
}
</style>